<template>
    <div >
      <el-row>
        <el-col :span="24">
          <!-- 搜索框部分 -->
          <el-form inline>
            <el-form-item label="用户名">
              <el-input placeholder="用户名" style="width: 250px;" v-model="param.operator"></el-input>
            </el-form-item>
  
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="param.dateRange"
                style="width: 250px;"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
  
            <el-form-item>
              <el-col :span="24" style="display: flex; align-items: center; justify-content: flex-start;">
                <!-- 搜索按钮 -->
                <el-button icon="el-icon-search" style="color:black;" circle @click="queryBtn"></el-button>
  
                <!-- 清空按钮 -->
                <el-button type="info" circle @click="clearSearch">空</el-button>
              </el-col>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
  
      <el-row>
        <br>
      </el-row>
  
      <el-row>
        <el-col :span="24">
          <!-- 表格部分 -->
          <el-table :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="操作顺序（小-大）" width="140"></el-table-column>
            <el-table-column prop="operator" label="用户名" width="150"></el-table-column>
            <el-table-column prop="className" label="操作模块" width="200"></el-table-column>
            <!-- <el-table-column prop="methodName" label="方法名" width="200"></el-table-column> -->
            <el-table-column prop="operationTime" label="操作时间" width="200"></el-table-column>
            <el-table-column prop="endTime" label="结束时间" width="200"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
  
      <el-row>
        <el-col :span="24">
          <!-- 分页部分 -->
          <div class="block">
            <el-pagination
              background
              :page-sizes="[5, 10, 20, 50]"
              :page-size="pageSize"
              :current-page="pageNum"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @prev-click="prePage"
              @next-click="nextPage"
              @current-change="curPage"
              @size-change="sizeChange"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        pageSize: 5,
        pageNum: 1,
        param: {
          username: '',
          dateRange: [],
        },
        tableData: [],
        total: 0,
        multipleSelection: [],
      };
    },
    methods: {
      queryBtn() {
        this.pageNum = 1;
        this.queryLog();
      },
      queryLog() {
        const pageParam = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          param: this.param,
        };
  
        this.$axios.post('api/log/queryLog', pageParam)
          .then(response => {
            if (response.data.code === 200) {
              this.tableData = response.data.data.list;
              this.total = response.data.data.total;
            }
          });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      clearSearch() {
        this.param = {}; // 清空所有参数
        this.queryLog();
      },
      nextPage(val) {
        this.pageNum = val;
        this.queryLog();
      },
      prePage(val) {
        this.pageNum = val;
        this.queryLog();
      },
      curPage(val) {
        this.pageNum = val;
        this.queryLog();
      },
      sizeChange(val) {
        this.pageSize = val;
        this.queryLog();
      },
    },
    created() {
      this.queryLog();
    },
  };
  </script>
  
  <style scoped>
  /* 这里可以添加组件的样式 */
  </style>  